import { computed, defineComponent, ref } from 'vue';
import Dark from './Dark.vue';
import Delay from './Delay.vue';
import Horizontal from './Horizontal.vue';
import ScrollPosition from './ScrollPosition.vue';
import ScrollbarVisibility from './ScrollbarVisibility.vue';
import Styled from './Styled.vue';
import StyledBar from './StyledBar.vue';
import Synchronized from './Synchronized.vue';
import VertHoriz from './VertHoriz.vue';
import Vertical from './Vertical.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Dark</h5>
            <Dark />
          </div>
          <div class='block-'>
            <h5 class='title'>Delay</h5>
            <Delay />
          </div>
          <div class='block-'>
            <h5 class='title'>Horizontal</h5>
            <Horizontal />
          </div>
          <div class='block-'>
            <h5 class='title'>ScrollPosition</h5>
            <ScrollPosition />
          </div>
          <div class='block-'>
            <h5 class='title'>ScrollbarVisibility</h5>
            <ScrollbarVisibility />
          </div>
          <div class='block-'>
            <h5 class='title'>Styled</h5>
            <Styled />
          </div>
          <div class='block-'>
            <h5 class='title'>StyledBar</h5>
            <StyledBar />
          </div>
          <div class='block-'>
            <h5 class='title'>Synchronized</h5>
            <Synchronized />
          </div>
          <div class='block-'>
            <h5 class='title'>VertHoriz</h5>
            <VertHoriz />
          </div>
          <div class='block-'>
            <h5 class='title'>Vertical</h5>
            <Vertical />
          </div>
        </div>
      );
    };
  },
});
